<template>
    <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item >入库申请审核</el-breadcrumb-item>
    <el-breadcrumb-item :to="{path:'/contract'}">补货申请审核</el-breadcrumb-item>
    <el-breadcrumb-item :to="{path:'/shop'}">采购申请审核</el-breadcrumb-item>
  </el-breadcrumb>
  <el-card >

  <el-row :gutter="20">
      <el-col :span="4"><el-input placeholder="请输入查询号码" v-model="queryinfo.search"  clearable @clear="getUserList">
<el-button slot="append" icon="el-icon-search" @click="Search"></el-button>
  </el-input></el-col>
  <template>
  <el-select v-model="queryinfo.usertext1"  @blur="Search1" @focus="getUserList" clearable placeholder="审核人" style="width: 120px; margin-right: 6px;">
    <el-option
      v-for="item in listtest"
      :key="item.id"
      :label="item.auditor"
      :value="item.auditor">
    </el-option>
  </el-select>
</template>
  <template>
  <el-select v-model="usertext"  clearable placeholder="申请人" @blur="Search2" @focus="getUserList" style="width: 120px;  margin-right: 6px;">
    <el-option
      v-for="item in listtest"
      :key="item.id"
      :label="item.applyname"
      :value="item.applyname">
    </el-option>
  </el-select>
</template>
<template>
  <el-select v-model="state1"  clearable placeholder="申请状态" style="width: 120px;  margin-right: 6px;">
    <el-option
      v-for="item in options"
      :key="item.value1"
      :label="item.label1"
      :value="item.label1">
    </el-option>
  </el-select>
</template>
<template>
  <el-select v-model="state2"  clearable placeholder="审核状态" style="width: 120px;  margin-right: 6px;">
    <el-option
      v-for="item in options2"
      :key="item.value2"
      :label="item.label2"
      :value="item.label2">
    </el-option>
  </el-select>
</template>
<template>
  <el-select v-model="type"  clearable placeholder="业务类型" style="width: 120px; margin-right: 6px;"  >
    <el-option
      v-for="item in options3"
      :key="item.value3"
      :label="item.label3"
      :value="item.label3">
    </el-option>
  </el-select>
</template>
<template>
  <el-select v-model="supplier"  clearable placeholder="供应商" style="width: 120px;  margin-right: 6px;">
    <el-option
      v-for="item in listtest"
      :key="item.id"
      :label="item.supplier"
      :value="item.supplier">
    </el-option>
  </el-select>
</template>

<template>
  <el-select v-model="contracttype"  clearable placeholder="合同类型" style="width: 120px;  margin-right: 6px;">
    <el-option
      v-for="item in options4"
      :key="item.value4"
      :label="item.label4"
      :value="item.label4">
    </el-option>
  </el-select>
</template>

  </el-row>
  <div class="block" style="margin-top: 10px;">
  <el-date-picker
    v-model="data1"
    type="daterange"
    range-separator="至"
    start-placeholder="申请开始日期"
    end-placeholder="申请结束日期"
    style="margin-right: 10px;">
  </el-date-picker>
  <el-date-picker
    v-model="data2"
    type="daterange"
    range-separator="至"
    start-placeholder="审核开始日期"
    end-placeholder="审核结束日期"
    style="margin-right: 10px;">
  </el-date-picker>
  <el-button type="primary" icon="el-icon-refresh" @click="refresh"></el-button>

</div>
  <template>
      <el-table
      :data="currentPageData"
        border
        stripe

        >
        <el-table-column
         prop="id"
label="编号"
width="80%"
align="center"
          >
        </el-table-column>
        <el-table-column
          prop="applyid"
          label="申请单号"
          width="120%"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="document"
          label="关联单据号"
          width="120%"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="type"
          label="业务类型"
          width="120%"
          align="center">
        </el-table-column>
        <el-table-column
          prop="supplier"
          label="供应商"
          width="120%"
          align="center">
        </el-table-column>
        <el-table-column
          prop="contract"
          label="合同号"
          width="120%"
          align="center">
        </el-table-column>
        <el-table-column
          prop="contracttype"
          label="合同类型"
          width="120%"
          align="center">
        </el-table-column>
        <el-table-column
          prop="applytype"
          label="申请类型"
          width="120%"
          align="center">
        </el-table-column>
        <el-table-column
          prop="applyname"
          label="申请人"
          width="120%"
          align="center">
        </el-table-column>
        <el-table-column
          prop="applydata"
          label="申请日期"
          width="120%"
          align="center">
        </el-table-column>
        <el-table-column
          prop="applystate"
          label="申请状态"
          width="120%"
          align="center">
        </el-table-column>
        <el-table-column
          prop="auditor"
          label="审核人"
          width="120%"
          align="center">
        </el-table-column>
        <el-table-column
          prop="auditordata"
          label="审核日期"
          width="120%"
          align="center">
        </el-table-column>
        <el-table-column
        prop="auditorstate"
          label="审核状态"
          width="120%"
          align="center">
        </el-table-column>
        <el-table-column
          label="操作"
          width="130%"
          align="center">
          <template v-slot="">

              <el-tooltip  effect="dark" content="详细" placement="top">
                  <el-button type="primary" icon="el-icon-info" size="12px" circle @click="detail"></el-button>
      </el-tooltip>

          </template>
        </el-table-column>
      </el-table>
    </template>
    <div class="block">

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryinfo.pagenum"
        :page-sizes="[1, 2, 3, 5,8,10]"
        :page-size="queryinfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        style="margin-top: 20px;">
      </el-pagination>

    </div>
  </el-card>
<el-dialog
  title="审核入库申请"
  :visible.sync="putusers"
  width="33%"
 >
  <span class="opinion">
    <el-form :inline="true" >
  <el-form-item >
    <el-input placeholder="审批意见" class="opininp"></el-input>
  </el-form-item>

    </el-form>
    <el-row class="opinbtu" >
<el-divider class="underline"><i class="el-icon-s-check"></i></el-divider>
<div >
      <el-button type="success"  round @click="pass(index)">审批通过</el-button>
      <el-button type="danger" round @click="reject">审批驳回</el-button>
</div>
</el-row>
  </span>
</el-dialog>
<!-- 修改用户 -->
    </div>
  </template>
<script>
import axios from 'axios'
export default {
  name: 'PurchasePlan',
  data () {
    return {
      index: 0,
      supplier: '',
      contract: '',
      contracttype: '',
      data1: '',
      data2: '',
      state1: '',
      state2: '',
      usertext: '',

      type: '',
      listtest: [],
      userinfo: [],
      total: 0,
      addDialogVisible: false,
      queryinfo: {
        search: '',
        pagenum: 1,
        pageSize: 5,
        usertext1: ''
      },

      addForm: {
      },
      addFormref: {},
      addrules: {
      },
      putusers: false,
      options: [{
        value1: '选项1',
        label1: '未提交'
      }, {
        value1: '选项2',
        label1: '待审核'
      }, {
        value1: '选项3',
        label1: '已审核'
      }],
      options2: [{
        value2: '选项1',
        label2: '通过'
      }, {
        value2: '选项2',
        label2: '驳回'
      }],
      options3: [{
        value3: '选项1',
        label3: '生产入库'
      },
      {
        value3: '选项2',
        label3: '采购入库'
      },
      {
        value3: '选项3',
        label3: '退货入库'
      }
      ],
      options4: [{
        value4: '选项1',
        label4: '采购合同'
      },
      {
        value4: '选项2',
        label4: '销售合同'
      }
      ]

    }
  },
  methods: {
    // 获取列表V
    async getUserList () {
      const res = await axios.get('/cart', {
        params:
        this.queryinfo
      })
      this.listtest = res.data.user
      this.total = res.data.total
    },

    // 获取页码V
    async getPage () {
      const res = await axios.get('/cart')
      this.queryinfo.pagenum = res.data.pagenum
      this.queryinfo.pageSize = res.data.pageSize
      this.getUserList()
    },

    handleSizeChange (newsize) {
      this.queryinfo.pageSize = newsize
    },
    handleCurrentChange (newnum) {
      this.queryinfo.pagenum = newnum
    },
    // 更新用户状态V
    addchear () {
      this.$refs.addFormref.resetFields()
    },

    async pass (index) {
      const res = await axios.get('/cart')
      for (const item of res.data.user) {
        item.auditorstate = '通过'
      }
      await axios.put('/cart', res.data)
      this.$message.success('审批已通过！')
      this.putusers = false
      this.getUserList()
      console.log(index)
    },
    async reject () {
      const res = await axios.get('/cart')
      for (const item of res.data.user) {
        item.auditorstate = '驳回'
        await axios.put('/cart', res.data)
      }
      this.$message.error('审批已驳回！')
      this.putusers = false
      this.getUserList()
    },
    detail () {
      this.putusers = true
    },
    refresh () {
      this.state1 = ''
      this.state2 = ''
      this.usertext = ''
      this.queryinfo.usertext1 = ''
      this.type = ''
      this.supplier = ''
      this.contract = ''
      this.contracttype = ''
      this.data1 = ''
      this.data2 = ''
      this.queryinfo.search = ''
      this.getUserList()
    },
    async Search () {
      const res = await axios.get('/cart')
      this.listtest = res.data.user.filter((item) => {
        return item.document.toString().indexOf(this.queryinfo.search) !== -1 ||
        item.contract.toString().indexOf(this.queryinfo.search) !== -1 ||
        item.applyid.toString().indexOf(this.queryinfo.search) !== -1
      })
    },
    async Search1 () {
      const res = await axios.get('/cart')
      this.listtest = res.data.user.filter((item) => {
        return item.auditor.indexOf(this.queryinfo.usertext1) !== -1
      })
    },
    async Search2 () {
      const res = await axios.get('/cart')
      this.listtest = res.data.user.filter((item) => {
        return item.applyname.indexOf(this.usertext) !== -1
      })
    }
  },

  components: {},
  computed: {
    currentPageData () {
      const start = (this.queryinfo.pagenum - 1) * this.queryinfo.pageSize
      const end = start + this.queryinfo.pageSize
      return this.listtest.slice(start, end)
    }

  },

  mounted () {
    this.getUserList()
  }
}
</script>
  <style lang="less" scoped>
  .underline{
    position: relative;
    right: 142px;
  }
.data{
  margin-top: 12px;
}
.opinion{
position: relative;
left: 100px;
width: 200px;
height: 200px;
}
.opininp{
  box-sizing: border-box;
  position: relative;
 right: 90px;
  width: 500px;
}
.opinbtu{
  position: relative;
  left: 50px;
 padding-right: 20px;
 top: 20px;
}
.classify{
  position: relative;
  right: 10px;
  width: 93px;
}
  </style>
